<template>
    <div class='rmdList'>
      <div class="nav">
      <van-grid :gutter="12" :border="false"  v-for="item in gds" :key="item.id">
        <van-grid-item>
          <van-image :src="item.coverImgUrl" />
          <p>{{ item.name }}</p>
        </van-grid-item>
      </van-grid>
    </div>
    </div>
</template>

<script>
import axios from "axios";
export default {
   data(){
    return{
      gds:[],
    };
  },
  created(){
    axios
    .get("http://localhost:3000/toplist/detail", { params: { limit:10 } })
    .then((res) => {
      this.gds = res.data.list;
    });
  }
}
</script>
<style scoped>
   .nav  {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.nav .van-image {
  width: 1rem;
}
van-grid{
  overflow: hidden;
}
.nav .van-grid-item p{
  border: white .2rem solid;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .16rem;
  color: rgb(117, 116, 116);
  line-height: .213333rem;
  text-align: center;
}
.nav .van-grid-item__text {
  font-size: .266667rem;
  color: brown;
}

</style>